<template>
  <div :class="wrapperClasses" v-clickoutside="handleClose">
    <slot>
      <aty-input
        ref="input"
        :element-id="elementId"
        :class="[prefixCls + '-editor']"
        :readonly="!editable || readonly"
        :disabled="disabled"
        :placeholder="placeholder"
        :value="visualValue"
        @blur="handleBlur"
        @focus="handleFocus"
        @keydown="handleKeydown($event)"
        @iconclick="handleIconClick"
        @mouseenter.native="handleInputMouseenter"
        @mouseleave.native="handleInputMouseleave"
        :icon="iconType"

        :label="label"
        :required="required"
        :labelWidth="labelWidth"
        :labelPosition="labelPosition"
        :showMessage="false"
        :doValidate="false"
      />
    </slot>
    <!--验证提示-->
    <div :class="errorTipClasses" :style="errorTipStyles" v-if="isShowMessage">{{validateMessage}}</div>
    <transition name="transition-drop">
      <Drop
        v-show="visible"
        :class="[{ [prefixCls + '-transfer']: transfer }]"
        :placement="placement"
        ref="drop"
        @alreadyLoad="asyncComponentLoaded"
        v-if="dropLoaded"
        :data-transfer="transfer"
        v-transfer-dom>
        <div>
          <component
            :is="panel"
            ref="pickerPanel"
            :visible="visible"
            :showTime="type === 'datetime' || type === 'datetimerange'|| type === 'onlytimerange'"
            :confirm="isConfirm"
            :clearable="clearable"
            :selectionMode="selectionMode"
            :format="format"
            :value="internalValue"
            :isTimestamp="isTimestamp"
            :start-date="startDate"
            :split-panels="splitPanels"
            :show-week-numbers="showWeekNumbers"
            :picker-type="type"
            :multiple="multiple"
            :time-picker-options="timePickerOptions"
            :rangetype="type"
            v-bind="options"
            @on-pick="onPick"
            @on-pick-clear="handleClear"
            @on-pick-success="onPickSuccess"
            @on-pick-click="disableClickOutSide = true"
            @on-selection-mode-change="onSelectionModeChange" />
        </div>
      </Drop>
    </transition>
  </div>
</template>
<script src="./picker.js"></script>
